<template>
  <div class="list" ref="wrapper">
    <div class="content">
      <div class="conment">
        <p>当前城市</p>
        <div>{{this.$store.state.city}}</div>
        <p>热门城市</p>
        <div>
          <button @click="changeCity">北京</button>
          <button @click="changeCity">郑州</button>
          <button @click="changeCity">上海</button>
          <button @click="changeCity">三亚</button>
          <button @click="changeCity">大新密</button>
          <button @click="changeCity">许昌</button>
        </div>
        <div>城市列表</div>
        <div class="box">
          <div class="box-char" v-for="(item, index) in citys.keys" :key="index">{{item}}</div>
        </div>
      </div>
      <div class="city-list">
        <div class="area" v-for="(item, key) in citys.keys" :key="key" :ref="item">
          <div class="title border-topbottom">{{item}}</div>
          <div class="item-list">
            <div class="item border-bottom" v-for="(val, index) in citys.citys[item]" :key="index">{{val}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  export default {
    props: {
      'citys': Object, //指定传递数据的类型
      'letter': String
    },
    data() {
      return {
        area: ''
      }
    },
    methods: {
      changeCity (e) {
        this.$store.dispatch('cCity',e.target.innerText)
        this.$router.push('/')
      }
    },
    watch: {
      letter() {
        if (this.letter) {
          const el = this.$refs[this.letter][0]
          // console.log(el)
          this.scroll.scrollToElement(el)
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        // this.scroll = new BScroll(this.$refs.wrapper)
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.wrapper,{
              click: true,
              scrollY: true,
              pullUpLoad: {
                threshold: -30 // 当上拉距离超过30px时触发 pullingUp 事件
              },
              pullDownRefresh: {
                threshold: 30, // 下拉距离超过30px触发pullingDown事件
                stop: 20 // 回弹停留在距离顶部20px的位置
              }
            })
            // console.log(this.scroll)
            
            this.scroll.on('pullingUp',() => {
              // 上提 加载更多
              console.log('上提 加载更多')
              this.scroll.finishPullUp(); // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则上拉事件只会执行一次
            })
            this.scroll.on('pullingDown', () => {
              // 下拉动作
              console.log('下拉')
              this.scroll.finishPullDown(); // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则下拉事件只会执行一次
            })
          
        } 
      })
    }
  }
</script>

<style lang="stylus" scoped>
  .border-bottom
    &:before
      border-color #ccc
    &:after
      border-color #ccc
  .list
    // width 100%
    overflow hidden
    position absolute
    top .86rem
    left 0
    right 0
    bottom 0
    border 1px red red
    .show
      height 300px
      background-color red
    .item-list
      .item
        line-height .76rem
        padding-left .2rem
    .title
      line-height .44rem
      background-color #eee
      padding-left .2rem
      color #666
      font-size .26rem
    .conment
      // width 100%
      .box
        display flex
        flex-wrap: wrap;
        // width 100%
        padding .1rem .6rem .1rem .1rem
        .box-char
          width 25%
          height 0
          box-sizing border-box
          border 1px solid #fff
          padding-bottom .86rem
          text-align center
          line-height .86rem
          background-color red
          color #fff
    .p-city
      border 1px solid red
</style>
